
%flat_stackswitcher {
  background-color: $lighter_bg_color;
  border-radius: 3px;
  border: none;
  padding: 0 8px;

  button {
    margin: 0;
    border-radius: 0;
    background-image: none;
    background-color: transparent;
    box-shadow: none;
    transition: $ripple_duration,
                background-size 0,
                background-image 0,
                background-color 0;
    animation: ripple_effect $ripple_duration $deceleration_curve forwards;
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $primary_color 0%,
                                  transparent 0%)
                                  0 0 0 / 0 0 0;

    &:hover {
      box-shadow: inset 0 -2px rgba($primary_color, 0.5);
      background-image: none;
      background-color: transparent;
    }

    &:checked, &:active {
      border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                    $primary_color 100%,
                                    transparent 0%)
                                    0 0 2 / 0 0 2px;
      background-image: none;
      background-color: transparent;
      box-shadow: none;
      color: $fg_color;
    }
  }
}

//
// Nautilus
//
// based css:
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/Adwaita.css
// hard-coded css:
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/nautilus.css

%pathbar_widthbox_button {
  transition: $shorter_transition,
              background-size 0,
              background-image 0,
              background-color 0;
  animation: ripple_effect $shorter_duration $deceleration_curve forwards;
  color: $secondary_headerbar_fg_color;
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                $theme_color 0%,
                                transparent 0%)
                                0 0 0 / 0 0 0;

  &:hover {
    color: $headerbar_fg_color;
    background: none;
    box-shadow: inset 0 -2px rgba($theme_color, 0.5);
  }

  &:checked, &:active {
    color: $headerbar_fg_color;
    background: none;
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $theme_color 100%,
                                  transparent 0%)
                                  0 0 2 / 0 0 2px;
  }

  &:checked:hover {
    background: none;
    box-shadow: none;
  }

  &:backdrop {
    color: scale-alpha($secondary_headerbar_fg_color, 0.75);
    &:disabled { color: scale-alpha($disabled_headerbar_fg_color, 0.75); }
  }
}

%pathbar_box_button {
  @extend %flat_button;
  color: $secondary_headerbar_fg_color;
  background-color: transparent;
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                $theme_color 0%,
                                transparent 0%)
                                0 0 0 / 0 0 0;
  &:hover {
    background-color: transparent;
    color: $headerbar_fg_color;
    box-shadow: inset 0 0 0 9999px rgba($headerbar_fg_color, 0.12);
  }

  &:active, &:checked {
    color: $headerbar_fg_color;
    background-color: transparent;
    box-shadow: inset 0 0 0 9999px rgba($headerbar_fg_color, 0.12);
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $theme_color 100%,
                                  transparent 0%)
                                  0 0 2 / 0 0 2px;
    background-image: radial-gradient(circle farthest-corner at center,
                                      rgba($headerbar_fg_color, 0.12) 10%,
                                      transparent 0%);
  }

  &:checked, &:checked:hover { // Reset checked buttons
    background: none;
    box-shadow: none;
  }

  &:backdrop {
    color: scale-alpha($secondary_headerbar_fg_color, 0.75);
    &:disabled { color: scale-alpha($disabled_headerbar_fg_color, 0.75); }
  }
}

// path-bar-box for > 3.30
.nautilus-window headerbar {
  .path-bar-box {
    margin-top: $container_padding;
    margin-bottom: $container_padding;
    border-radius: $md_radius;

    button {
      margin: 0;
      @extend %pathbar_box_button;
    }

    .linked.nautilus-path-bar { // for ≥ 3.31.90
      button.text-button,
      button.image-button.text-button {
        margin-top: 0;
        margin-bottom: 0;
        @extend %pathbar_box_button;

        &:not(:only-child):last-child {
          border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                        $theme_color 100%,
                                        transparent 0%)
                                        0 0 2 / 0 0 2px;
        }
      }
    }

    &.width-maximized {
      color: $secondary_headerbar_fg_color;
      background-color: rgba($headerbar_fg_color, 0.06);
    }

    // workaround for 3.30.1
    &.background.frame {
      border: none;
      background-color: transparent;
    }
  }
}

.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background: $base_color;
}

.nautilus-window notebook > header.top tabs,
.nautilus-window notebook > header.bottom tabs {
  padding-left: 0;
  padding-right: 0;
}

.nautilus-window notebook > header.left tabs,
.nautilus-window notebook > header.right tabs {
  padding-top: 0;
  padding-bottom: 0;
}

.nautilus-canvas-item {
  border-radius: $md_radius;
}

.nautilus-canvas-item.dim-label,
.nautilus-list-dim-label {
  color: mix($fg_color, $bg_color, 50%);

  &:selected, &:selected:focus { color: mix($inversed_fg_color, $primary_color, 80%); }
}

%desktop-canvas-item,
.nautilus-desktop.nautilus-canvas-item {
  // background-color: scale-alpha(#000000, $lower_opacity);
  color: $inversed_fg_color;
  text-shadow: $z-depth-1;

  &:selected {
    text-shadow: none;
  }
}

// places sidebar
filechooser,
.nautilus-window {
  placessidebar.sidebar {
     separator,
     .separator {
       min-height: 1px;
       border-color: $borders_color;
       background-color: $borders_color;
     }

    row.sidebar-row {
      padding: 0;

      &:hover {
        transition: none;
        color: $inverse_theme_color;
        background-color: transparent;
        box-shadow: inset 3px 0 $inverse_theme_color;
      }

      &:active { box-shadow: inset 3px 0 $primary_color; }

      &:backdrop { opacity: 0.85; }

      &:selected {
        &:active { box-shadow: none; }
        &:hover { box-shadow: none; color: $dark_contrast_color; background-color: scale-alpha($primary_color, 0.8); }
      }
    }
  }
}

// Toolbar
@keyframes needs_attention_keyframes {
  from { background-color: transparent; }
  to { background-color: $track_color; }
}

.nautilus-operations-button-needs-attention {
  color: $accent_color;
  animation: needs_attention_keyframes $shorter_duration $standard_curve 2 alternate;
}

.nautilus-operations-button-needs-attention-multiple {
  color: $accent_color;
  animation: needs_attention_keyframes $shorter_duration $standard_curve 4 alternate;
}

// Floating status bar
.nemo-window,
.nautilus-window {
  .floating-bar {
    @extend %osd;

    min-height: 32px;
    padding: 0;
    border: 1px solid $borders_color;
    border-radius: 0;
    background-color: $base_color;
    background-clip: $extra_background_clip;
    transition: $shorter_transition, border-width 0;

    &.bottom.left { // axes left border and border radius
      // margin-right: 8px;
      border-width: 1px 1px 0 0;
      border-top-right-radius: 3px;
    }

    &.bottom.right { // axes right border and border radius
      // margin-left: 8px;
      border-width: 1px 0 0 1px;
      border-top-left-radius: 3px;
    }

    button {
      margin: 8px;

      @extend %small_button;
      @extend %simple_flat_button;
    }
  }
}

// .disk-space-display {
//   border-style: solid;
//   border-width: 2px;
// }

.disk-space-display.unknown {
  background-color: $warning_color;
}

.disk-space-display.used {
  background-color: $primary_color;
}

.disk-space-display.free {
  background-color: $track_color;
  color: $disabled_fg_color;
}

// View
// .nautilus-list-view .view {
//   border-bottom: 1px solid $borders_color;
// }

// Hide superfluous treeview drop target indication
// .nautilus-list-view .view.dnd {
//   border-style: none;
// }

// Libgd tag entries in the search. Sadly it requires this copy pasted css style.
// https://git.gnome.org/browse/libgd/tree/libgd/gd-tagged-entry-default.css
.documents-entry-tag {
  // min-height: 24px;
  margin: 3px -2px 3px 8px;
  padding: 0 8px;
  border-radius: $circular_radius;
  box-shadow: none;
  background-color: $primary_color;
  color: $inversed_fg_color;

  &:hover { box-shadow: $z-depth-1; }
}

.documents-entry-tag.button {
  // @extend %simple_flat_button;

  // min-height: 24px;
  // min-width: 24px;
  margin: 0 -2px;
  padding: 4px;
  border-radius: $circular_radius;
  box-shadow: none;
  color: $secondary_inversed_fg_color;

  &:hover, &:active { color: $inversed_fg_color; }
}

// Workaround for the double border of the searchbar since we use a revealer which
// always allocates at least 1 pixel
.nautilus-window {
  searchbar { border-top: 1px solid $borders_color; }

  .searchbar-container { margin-top: -1px; }

  headerbar > revealer > button { @extend %circular_button; }
}


//
// gedit
//
paned.titlebar.horizontal { // show border
  > headerbar {
    box-shadow: inset 0 -1px $borders_color, inset 0 1px $secondary_highlight_color;
  }

  > separator {
    box-shadow: inset 0 1px $secondary_highlight_color;
  }
}

/* Only normal state is handle */
.open-document-selector-name-label {
  font-weight: bold;
}

/* Only normal state is handle */
.open-document-selector-path-label {
  color: gtkalpha(currentColor, $hint_opacity);
  font-size: smaller;

  // @extend .dim-label;
}

.gedit-document-panel {
  background-color: $lighter_bg_color;
  box-shadow: inset 1px 0 $borders_color;

  row.activatable { padding: 6px 4px; }
}

.gedit-document-panel row:selected {
}

.gedit-document-panel-group-row,
.gedit-document-panel-group-row:hover {
  border-top: 1px solid gtkalpha(currentColor, 0.3);
}

.gedit-document-panel-group-row:first-child,
.gedit-document-panel-group-row:first-child:hover {
  border-top: 0px;
}

/* Try to look as the notebook tab close button */
.gedit-document-panel row button.flat {
  @extend %small_button;
}

.gedit-side-panel-paned statusbar {
  border-top: 1px solid $borders_color;
}

.gedit-search-slider {
  margin: 4px 4px 8px;

  .gedit-search-entry-occurrences-tag {
    all: unset;
    border: none;
    box-shadow: none;
    padding: 0 4px;
    color: gtkalpha(currentColor, $hint_opacity);
  }

  popover.background {
    transition: $shadow_transition;
    padding: 0;
    box-shadow:  $z-depth-2; // TODO: this should really have a highlight
    background-color: $dark_contrast_color;
  }

  entry {
    &:dir(ltr) {
      margin-right: -$medium_size * 2;
      padding-right: $medium_size * 2 + 8px;

      .gedit-search-entry-occurrences-tag { box-shadow: none; margin-right: -8px; }
    }

    &:dir(rtl) {
      margin-left: -$medium_size * 2;
      padding-left: $medium_size * 2 + 8px;

      .gedit-search-entry-occurrences-tag { box-shadow: none; margin-left: -8px; }
    }

    &.error ~ button {
      @extend %simple_flat_button;

      color: $secondary_inversed_fg_color;

      &:hover {
        background-image: none;
        box-shadow: none;
        color: $inversed_fg_color;
        background-color: $semi_track_color;
      }

      &:active {
        background-image: radial-gradient(circle farthest-corner at center,
                                          $semi_track_color 10%,
                                          transparent 0%);
        box-shadow: none;
        color: $inversed_fg_color;
        background-color: $semi_track_color;
      }

      &:disabled { color: $disabled_secondary_inversed_fg_color; }
    }

    // entry error and warning style
    @each $e_type, $e_color in (error, $error_color),
                               (warning, $warning_color) {
      &.search.#{$e_type} {
        @include entry(normal, $e_color);

        &:focus { @include entry(focus, $e_color); }

        &:disabled { @include entry(disabled, $e_color); }

        &.flat {
          @include entry(flat-normal, $e_color);

          &:focus { @include entry(flat-focus, $e_color); }

          &:disabled { @include entry(flat-disabled, $e_color); }
        }
      }
    }
  }

  button {
    @extend %simple_flat_button;

    &:dir(ltr),
    &:dir(rtl) { @extend %linked; }
  }
}

// Yeah this is ugly
.gedit-search-slider .linked:not(.vertical) > entry,
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
  border-radius: 2px;
}

//
// Gnome-Software
//
window.background > box.vertical > overlay > stack > widget > stack {

  // "Installed" stack
  > box.vertical > scrolledwindow > viewport.frame > widget > list {
    background-color: $bg_color; // override $base_color

    // use asymmetrical separators
    > separator {
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
    }
  }

  // "Updates" stack
  widget > box.vertical.app-list {
    // override $base_color
    background-image: image($bg_color);

    > box.vertical > list { background-color: $bg_color; }

    // use asymmetrical separators
    separator {
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
    }
  }
}

.category_page_header_filter_box {
  background-image: image($bg_color);
  border-image: linear-gradient(to bottom, $solid_borders_color, $solid_borders_color) 0 0 1 0 / 0 0 1px 0 stretch;

  button {
    color: $secondary_fg_color;
    background-image: image($bg_color);
    &:hover { color: mix($fg_color, rgba($fg_color, 0.5), 50%); }
    &:checked { color: $fg_color; }
    &:disabled { color: rgba($secondary_fg_color, 0.55); }
  }
}

.application-details-infobar {
  background-image: image($base_color);
  border-image: linear-gradient(to bottom, $solid_borders_color, $solid_borders_color) 1 1 1 1 / 1px 1px 1px 1px stretch;
}

//
// Gnome-Logs
//
window.background > box.vertical box.horizontal {
  > box.vertical > scrolledwindow > viewport.frame > list { // right-pane

    // > 3.25.90
    row.event.activatable {
      color: $fg_color;
      transition-duration: 0.1s;
      &:hover,
      &:active { color: $fg_color; }

      label.compressed-entries-label { // hard-coded background-color?
        background-image: image($suggested_color);
        color: $dark_contrast_color;
        font-weight: 700;
      }

      &.compressed-row {
        background-image: image(darken($bg_color, 3%));
        color: darken($fg_color, 20%);
        transition-property: opacity, // exclude background-color
                             border-image,
                             background-image,
                             box-shadow;
        &:hover {
          background-image: image(mix($fg_color, $bg_color, 5%));
          color: $fg_color;
        }
        &:active {
          &, &:focus {
            background-image: image(mix($fg_color,
                                        $bg_color, 10%));
            color: $fg_color;
            animation: none;
          }
        }

        &.popover-activated-row {
          background-image: image($primary_color);
          color: $dark_contrast_color;
        }

        &-header {
          background-image: image($base_color); // stop highlighting
          background-color: $base_color; // stop highlighting
          color: $primary_color;
          &:hover {
            background-image: image(mix($primary_color,
                                        $base_color, 5%));
          }
          &:active {
            &, &:focus {
              background-image: image(mix($primary_color,
                                          $base_color, 10%));
              color: $primary_color;
              animation: none;
            }
          }

          label.compressed-entries-label {
            background-image: image($primary_color);
            color: $dark_contrast_color;
            transition-duration: 0s;
          }
        }
      }
    }
  }
}

//
// Builder
//
// based css:
// https://git.gnome.org/browse/gnome-builder/tree/data/theme
// hard-coded css:
// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css

// Titlebar adjustments for workbench
//
// This is needed due to our placement of headerbar inside of a
// stack. We were seeing black edges around the header bar, and
// improper radius on the headerbar.
//
workbench.csd > stack.titlebar:not(headerbar) {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 2px 2px 0 0;
}

workbench.csd:not(.tiled):not(.maximized):not(.fullscreen) > stack.titlebar:not(headerbar) {
  headerbar {
    &,
    &:first-child,
    &:last-child {
      border-radius: 2px 2px 0 0;
      border-bottom: 1px solid $borders_color;
    }
  }
}

perspectiveswitcher {
  background-color: $bg_color;
}

perspectiveswitcher button:checked {
  color: $primary_color;
}

// Layout tab and tab bar tweaks
// The following makes the layout stack header look similar to a tab bar.
layouttabbar {
  border-bottom: 1px solid $borders_color;
  background-color: $bg_color;
}

layouttabbar button { @extend %flat_button; }

layouttabbar > box > button {
  margin: (40px - $medium_size) / 2 0;
  // border-radius: 0;
}

layouttab {
  margin: 0 8px; // not working
  border-style: none solid;
  border-width: 1px;
  border-color: $borders_color;
  box-shadow: inset 0 -2px $primary_color;
  background-color: $base_color;
}

layouttab separator.vertical {
  margin: 8px 4px;
}

layouttab button {
  &.text-button, &.image-button, & {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 4px;
  }
}

// Close button styling for layouttab.
layouttab > box > button.close {
  border-radius: $circular_radius;
}

layout {
  border: 1px solid $borders_color;
  -PnlDockBin-handle-size: 1;
}

entry.search-missing {
  background-color: $error_color;
  color: $inversed_fg_color;
}

entry.search.preferences-search {
  box-shadow: none;
}

dzldockpaned {
  stackswitcher.linked.stack-switcher {
    @extend %flat_stackswitcher;
  }
}

// tweak icons for treeviews
workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); }
workbench treeview.image:selected { color: $tertiary_inversed_fg_color; }

dockbin {
  border: 1px solid $borders_color;
  -PnlDockBin-handle-size: 1;
}

dockpaned {
  border: 1px solid $borders_color;
}

eggsearchbar box.search-bar {
  padding: 0 8px;
  border-bottom: 1px solid $borders_color;
  background-color: $bg_color;
}

docktabstrip {
  padding: 0 8px;
  border-bottom: 1px solid $borders_color;
  background-color: $bg_color;
}

docktab {
  transition: $shorter_transition;
  min-height: $small_size;
  min-width: $small_size;
  margin-bottom: -1px;
  padding: $container_padding 6px;

  outline-offset: -6px;

  border-width: 1px;         // for reorderable tabs
  border-color: transparent; //

  color: $secondary_fg_color;
  font-weight: 500;

  &:hover {
    box-shadow: inset 0 -2px $track_color;
    color: $fg_color;
  }

  &:checked {
    animation: tab_ripple_effect $shorter_duration * 3 $deceleration_curve;
    box-shadow: inset 0 -2px $primary_color;
    color: $fg_color;
  }
}

dockoverlayedge {
  background-color: $bg_color;
}

dockoverlayedge docktabstrip {
  padding: 0;
  border: none;
}

dockoverlayedge.left-edge docktab {
  &:hover { box-shadow: inset -2px 0 $track_color; }
  &:checked { box-shadow: inset -2px 0 $primary_color; }
}

dockoverlayedge.right-edge docktab {
  &:hover { box-shadow: inset 2px 0 $track_color; }
  &:checked { box-shadow: inset 2px 0 $primary_color; }
}

pillbox {
  background-color: $bg_color;
  border-radius: 2px;
}

buildperspective row {
  padding: 10px;
}

layoutpane entry.search {
  @extend %flat_entry;

  box-shadow: inset 0 -1px $borders_color;
  background-color: $base_color;
}

editortweak entry.search {
  @extend %flat_entry;

  margin-bottom: -1px;
  box-shadow: none;
}

//
// let's tweak hard-coded elements
//

// styling for editor search
frame.gb-search-frame {
  // border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.gb-search-entry-occurrences-tag {
  box-shadow: none;
  background-color: transparent;
}

// Keep search bar and layouttab height in sync.
docktabstrip {
  min-height: 39px;
}

layouttabbar > box {
  // min-height: 39px;
}

eggsearchbar > revealer > box {
  // min-height: 39px;
}

eggsearchbar entry {
  // min-height: 24px;
}

workbench preferences preferencesgroup list entry {
  // background: none;
  // min-height: 0px;
  padding-top: 8px;
  padding-bottom: 8px;
}

//
// Photos
//
// based css:
// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css

GdMainIconView.content-view {
  -GdMainIconView-icon-size: 48;
}

// Make spinner visible on both dark and bright backgrounds w/o making
// it look ugly/weird.
GdMainIconView.content-view.cell:active {
  // color: $tertiary_fg_color;
}

.documents-counter {
  margin: 8px;
  border-radius: $circular_radius;
  box-shadow: $z-depth-2;
  background-color: $accent_color;
  color: $inversed_fg_color;
  font-weight: bold;
}

.photos-entry-tag {
  @extend .documents-entry-tag;
}

.documents-scrolledwin.frame {
  border-style: none;
}

.photos-icon-bg {
}

.photos-fade-in {
  opacity: 1;
  transition: opacity $shorter_duration $deceleration_curve;
}

.photos-fade-out {
  opacity: 0;
  transition: opacity $shorter_duration $deceleration_curve;
}

.photos-collection-icon {
}

overlay grid.horizontal > revealer > scrolledwindow.frame {
  &:dir(ltr) { border-style: none none none solid; }
  &:dir(rtl) { border-style: none solid none none; }
}


//
// Music
//
// hard-coded css:
// https://git.gnome.org/browse/gnome-music/tree/data/application.css

.side-panel:dir(ltr) {
  // border-width: 0 1px 0 0;
  border-style: solid;
  border-color: $borders_color;
}

.side-panel:dir(rtl) {
  // border-width: 0 0 0 1px;
  border-style: solid;
  border-color: $borders_color;
}

.side-panel .view {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
  background-image: image($lighter_bg_color);

  &:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); }
}

.side-panel .view:selected {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
  background-image: image($primary_color);

  &:hover { background-image: image(mix($inversed_fg_color, $primary_color, percentage(0.05))); }
}

.playlists-list {
  // box-shadow: inset 0 -1px @view_separators;
}

.songs-list {
  // box-shadow: inset 0 1px shade(@borders, 1.30);
  // background-color: @theme_bg_color;

  &:hover { background-image: image($row_track_color); }
}

frame.documents-dropdown {
  @extend %toolbar_osd;

  margin: 8px;

  > border { border: none; }
}

box.vertical:not(.titlebar) > revealer > toolbar.search-bar {
  border-bottom: 1px solid $borders_color;

  button > widget {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    // -GtkArrow-arrow-scaling: 1;
  }
}

//
// Gnome Control Center
//

// > 3.25.90
scrolledwindow.view > viewport.frame > stack > list { // left-pane
  > row.activatable { }
}

box.horizontal.titlebar > headerbar > stack > box.vertical {
  > .title { margin: 0; }
  > .subtitle { margin: -3px 0; }
}

dialog.background.csd {
  > headerbar.titlebar {

    > label:not(.title):not(.subtitle) {
      font-weight: 700;
    }
  }
}

window.background.csd {
  > headerbar.titlebar { // gnome 3.32
    > box.horizontal > separator.sidebar,
    > hdyleaflet > separator.sidebar {
      border-right-style: none;
      background: none;
      min-width: 0;
    }

    > hdyleaflet > headerbar { // Gnome 3.34
      box-shadow: inset 0 1px $secondary_highlight_color, inset 0 -1px $borders_color;
    }
  }

  > box.horizontal > separator.sidebar,
  > hdyleaflet > separator.sidebar {
    background: none;
    min-width: 0;
  }
}

//
// Contacts
//

// box.horizontal, // gnome 3.30
hdyleaflet {
  // selection-mode
  headerbar.titlebar.selection-mode & headerbar {
    separator.titlebutton {
      border: none;
      background-color: $primary_color;
      color: $primary_color;
    }

    button.titlebutton {
      &.close, &.maximize, &.minimize {
        &, &:hover, &:active, &:disabled, &:backdrop {
          background-image: none;
        }

        color: $inversed_fg_color;

        &:disabled, &:backdrop {
          color: gtkalpha($inversed_fg_color, $disabled_opacity);

          > label { color: inherit; }
        }

        &:hover {
          color: $inversed_fg_color;
          background-color: gtkalpha($inversed_fg_color, 0.15);
        }

        &:active {
          color: $inversed_fg_color;
          background-color: gtkalpha($inversed_fg_color, 0.25);
        }
      }
    }

    .fullscreen &,
    .maximized & {
      button.titlebutton.maximize {
        &, &:hover, &:active, &:disabled, &:backdrop {
          background-image: none;
        }
      }
    }
  }
}

//
// To Do
//
task-row {
  transition: $shorter_transition;
  margin: 0 -4px;

  &:hover { transition: none; }

  label { margin: 0 8px; }
  image { margin: 0 4px; }
}

task-list-view > box > revealer > box > button {
  min-height: $medium_size;
  margin: -4px;
  padding: 0 12px;

  label { margin: 0 8px; }
  image { margin: 0 4px; }
}


//
// eog
//
#eog-thumb-nav {
  scrolledwindow { border-top: none; }

  button { -gtk-outline-radius: 2px; }
}


//
// Evolution
//
frame.taskbar > border { border-style: solid none none; }

box.vertical > paned.horizontal notebook widget .frame { border-style: none; }


//
// gitg
//
frame.commit-frame > border { border-style: solid none none; }


//
// Characters
//
box.dialog-vbox scrolledwindow.related { border: 1px solid $borders_color; }

list.categories { background-image: image($lighter_bg_color); }


//
// Calculator
//
button.title label { min-height: $medium_size; }


//
// Gnome Tweaks
//
// hard-coded css:
// https://gitlab.gnome.org/GNOME/gnome-tweaks/blob/master/data/shell.css

// the sidebar
.tweak-categories {
  // padding: 4px 0;
  // background-color: shade(@theme_bg_color, 0.99);
  background-image: image($alt_base_color);

  separator {
    min-width: 0;
    min-height: 0;
    background-color: transparent;
  }
}

.tweak {
  // padding-top: 3px;
  padding: 3px;

  &.title:hover { box-shadow: none; }
}

.tweak-group-white,
.tweak-white,
.tweak-white:hover {
  // background-color: white;
  background-image: image($base_color);
}

.tweak-startup,
.tweak-startup:hover {
  // background-color: lighter(shade(@theme_bg_color, 0.9));
  background-image: image($base_color);
}

.tweak-group-startup {
  // background-color: @view_separators;
  background-image: image($base_color);
  border: 1px solid $borders_color;
}

// Workaround for 3.26
row#Focus,
row#ClickMethod,
row#StaticWorkspaceTweak, // for 3.26.0
row#dynamic-workspaces,
row#PrimaryWorkspaceTweak, // for 3.26.0
row#workspaces-only-on-primary {
  padding: 0;
  border: 1px solid $borders_color;

  row:not(:last-child) { border-bottom: 1px solid $borders_color; }

  &.tweak > list { margin-top: -3px; }
}

// Add more spaces between title and list
row#Focus,
row#ClickMethod,
row#PrimaryWorkspaceTweak, // for 3.26.0
row#workspaces-only-on-primary {
  margin-top: 4px;
}

window.background.csd {
  > hdyleaflet.titlebar > headerbar.titlebar { // Gnome 3.34
    box-shadow: inset 0 1px $secondary_highlight_color, inset 0 -1px $borders_color;
  }
}

//
// Terminix
//
.terminix-background box.vertical > widget > box.horizontal {
  padding: 3px 0 2px;
  // border-bottom: 1px solid $borders_color;

  button {
    padding: 4px 8px;

    &.image-button { padding: 4px; }
  }
}

.terminix-background revealer > frame > border {
  // border-style: none none solid;
  border-style: none;
}

button.image-button.session-new-button { min-width: $medium_size - 4px; }

overlay > revealer.left > scrolledwindow.frame,
overlay > revealer.right > scrolledwindow.frame {
  border-style: none;
  box-shadow: $z-depth-4;
}

overlay > revealer.left > scrolledwindow.frame {
  margin-right: 32px;
  // border-style: none solid none none;
}

overlay > revealer.right > scrolledwindow.frame {
  margin-left: 32px;
  // border-style: none none none solid;
}

.terminix-session-sidebar { background-image: image($lighter_bg_color); }


//
// Eclipse
//
window.background > box.vertical > scrolledwindow > widget toolbar {
  padding: 2px;

  separator,
  button { margin: 2px; }

  button { border-radius: 2px; }
}

//
// Firefox and Thunderbird
//
$firefox_border_color: $solid_borders_color;
$firefox_theme_color: if($color == 'black', #666666, $primary_color);
$firefox_fg_color: if($variant =='light', $secondary_fg_color, #bababa);
$firefox_bg_color: if($variant =='light', $lighter_bg_color, #666666);

// templates for the fallback mode buttons
%button_fallback_normal {
  border: 1px solid $borders_color;
  background-color: $lighter_bg_color;
  color: $secondary_fg_color;
  box-shadow: none;
}

%button_fallback_hover {
  border: 1px solid $borders_color;
  background-color: mix($lighter_bg_color, $fg_color, 96%);
  color: $fg_color;
  box-shadow: none;
}

%button_fallback_active {
  border: 1px solid $borders_color;
  background-color: mix($lighter_bg_color, $fg_color, 92%);
  color: $fg_color; // do not use inverted colours
  box-shadow: none;
  animation: none;
}

%button_fallback_insensitive {
  border: none;
  background-color: mix($bg_color, $fg_color, 96%);
  color: $disabled_fg_color;
  box-shadow: none;
}

%button_fallback_checked_insensitive {
  border: none;
  background-color: mix($primary_color, $lighter_bg_color, 20%);
  color: mix($primary_color, $lighter_bg_color, 40%);
  box-shadow: none;
}

// templates for the fallback mode entries
%entry_fallback_normal {
  border: 1px solid $borders_color;
  border-image: none;
  background-color: $lighter_bg_color;
  color: $secondary_fg_color;
  box-shadow: none;
}

%entry_fallback_focus {
  border: 1px solid $primary_color;
  border-image: none;
  background-color: $lighter_bg_color;
  color: $fg_color;
  box-shadow: none;
}

%entry_fallback_insensitive {
  border: 1px solid $borders_color;
  border-image: none;
  background-color: mix($bg_color, $fg_color, 96%);
  color: $disabled_fg_color;
  box-shadow: none;
}

%_html_button_spacing {
  min-width: unset; // do not set min-width/height
  min-height: unset;
  padding: 4px 8px 5px;
}

%_html_entry_spacing {
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
}

%html_selection_items {
  background-color: if($color == 'black' or $color == 'white', $question_bg_color, $primary_color);
  color: $inversed_fg_color;
  &:disabled { color: $disabled_inversed_fg_color; }
}

%firefox_selected_items {
  background-color: $primary_color;
  color: $inversed_fg_color;
  &:disabled { color: $disabled_inversed_fg_color; }
}

window.background:not(.csd) {
  > widget {
    // for the bookmark toolbar's separators
    > separator { color: $firefox_border_color; }

    // avoid black border
    > scrollbar { background-clip: border-box; }

    // emphasize borders color
    > scrollbar,
    > frame > border { border-color: $firefox_border_color; }

    > button > button {
      border: 1px solid $firefox_border_color;
      border-radius: 2px + 1px;
      box-shadow: none;
    }

    > entry {
      @extend %_html_entry_spacing;
      // enforce fallback entries inside the HTML pages
      @extend %entry_fallback_normal;
      border-radius: 2px;
      &:focus { @extend %entry_fallback_focus; }
      &:disabled { @extend %entry_fallback_insensitive; }
    }

    > button {
      &, &.combo {
        > button { // enforce fallback buttons inside the HTML pages
          @extend %button_fallback_normal;
          &:hover { @extend %button_fallback_hover; }
          &:active,
          &:checked { @extend %button_fallback_active; }
          &:disabled { @extend %button_fallback_insensitive; }
          &:checked:disabled {
            @extend %button_fallback_checked_insensitive;
          }
        }
      }

      &.combo, // generic button and combo spacing
      & { @extend %_html_button_spacing; }

      // toolbar combo buttons in 'downloads' sub-window
      &:not(.combo) > button { @extend %_html_button_spacing; }
    }

    // use 16px assets for hard-coded sizing
    > checkbutton > check { @extend %small_check; }
    > radiobutton > radio { @extend %small_radio; }

    // for backwards compatibility
    > menubar {
      color: $secondary_headerbar_fg_color;

      &:hover { color: $headerbar_fg_color; }
      &:disabled { color: $disabled_headerbar_fg_color; }
    }

    > frame { color: $firefox_border_color; }
  }

  > menu,
  > menu > menu {
    // border: none;
    background-color: $base_color;

    menuitem {
      color: $secondary_fg_color;
      &:hover { color: $inversed_fg_color; }
      &:disabled, label:disabled { color: $disabled_secondary_fg_color; }
    }
  }

  > window > menu {
    menuitem {
      transition: none; // Fixed plank menu background issue
    }
  }

  // Firefox now uses this for selected items
  text:selected { @extend %firefox_selected_items; }

  > menu > separator { color: $borders_color; }
}

//
// Firefox Quantum
//

#MozillaGtkWidget.background {
  &, decoration { border-radius: 0 0 0 0; } // enforce radius

  // FIXME: unset all our specific titlebuttons
  // until upstream stops rendering useless (weird) icons
  headerbar.titlebar {
    border-radius: 0 0 0 0;

    &.default-decoration {
      button.titlebutton {
        @extend %windows_button;
      }
    }
  }

  // blend with weird toolbar backgrounds
  background-color: $alt_base_color;

  // FIXME: resetting child elements background is not fully functional yet
  // because WidgetStyleCache keeps holding initial background-color.
  // the stem of this incorrect colouring seems to be caused by their
  // gdk_rgba to ns_rgba conversion. I don't think theme's fault.
  .background,
  frame,
  separator,
  scrolledwindow { background-color: $bg_color; }

  scrollbar { background-color: $darker_bg_color; }

  *:not(menuitem):hover, // exclude menuitem node
  *:focus,
  *:active,
  *:checked {
    &, button { color: $fg_color; } // enforce opaque foregrounds
  }

  > window.background > menu { // context-menus
    background-color: $base_color;

    // revert to standard separators
    > separator {
      padding: 0;
      border: none;
      background-color: $firefox_border_color;
    }

    > menuitem > radio { @extend %small_radio; }
    > menuitem > check { @extend %small_check; }

    // check/radio inside selected-menu
    @each $w in ('check'),
                ('radio') {

      // standard checks and radios
      @each $s, $c in ('', gtkalpha(currentColor, $hint_opacity)),
                      (':indeterminate', $alt_theme_color),
                      (':checked', $alt_theme_color),
                      (':hover', $dark_contrast_color),
                      (':indeterminate:hover', $dark_contrast_color),
                      (':checked:hover', $dark_contrast_color),
                      (':disabled', gtkalpha($dark_contrast_color, 0.5)),
                      (':indeterminate:disabled', gtkalpha($dark_contrast_color, 0.5)),
                      (':checked:disabled', gtkalpha($dark_contrast_color, 0.5)) {
        > menuitem > #{$w}#{$s} { color: $c; }
      }
    }
  }

  > widget {
    border { border-color: $firefox_border_color; }
    separator { background-color: $firefox_border_color; }

    // FIXME: this affected to popover widget as well,
    // so we can not set $lighter_bg_color to search-bar...
    > scrolledwindow > textview {
      background-color: if($variant == 'light', $base_color, lighten($base_color, 0%));

      text {
        background-color: transparent;
        color: $firefox_fg_color;

        &:selected {
          &, &:focus {
            @extend %firefox_selected_items;
          }
        }

        selection { @extend %html_selection_items; }
      }
    }

    > button {
      &, &.combo {
        > button { // enforce fallback buttons inside the HTML pages
          @extend %button_fallback_normal;
          &:hover { @extend %button_fallback_hover; }
          &:active,
          &:checked { @extend %button_fallback_active; }
          &:disabled { @extend %button_fallback_insensitive; }
          &:checked:disabled {
            @extend %button_fallback_checked_insensitive;
          }
        }
      }

      &.combo, // generic button and combo spacing
      & { @extend %_html_button_spacing; }

      // toolbar combo buttons in 'downloads' sub-window
      &:not(.combo) > button { @extend %_html_button_spacing; }
    }

    > entry {
      @extend %_html_entry_spacing;
      // enforce fallback entries inside the HTML pages
      @extend %entry_fallback_normal;
      border-radius: 2px;
      &:focus { @extend %entry_fallback_focus; }
      &:disabled { @extend %entry_fallback_insensitive; }
    }

    %firefox_check_radio {
      color: #888888;
      &:hover { color: gtkalpha(#888888, 0.75); }
      &:checked, &:indeterminate { color: $firefox_theme_color; }
      &:checked:hover, &:indeterminate:hover { color: gtkalpha($firefox_theme_color, 0.8); }
      &:disabled { color: gtkalpha(#888888, 0.5); }
      &:checked:disabled, &:indeterminate:disabled { color: gtkalpha($firefox_theme_color, 0.5); }
    }

    // use 16px assets for hard-coded sizing
    > checkbutton > check { @extend %small_check; @extend %firefox_check_radio; }
    > radiobutton > radio { @extend %small_radio; @extend %firefox_check_radio; }

    > check,
    > radio { // unset all
      min-width: 16px;
      min-height: 16px;
      margin: 0;
      padding: 0;
      background-image: none;
      transition: none;
    }
  }
}

//
// Chrome(ium)
//
$chrome_borders_color: $solid_borders_color;
$chrome_bg_color: $bg_color;
$chrome_fg_color: $fg_color;
$chrome_menu_bg_color: $base_color;
$chrome_menu_fg_color: $fg_color;

window.background.chromium {
  // checked-tab & toolbar & button widgets
  background-color: $chrome_bg_color;
  color: $chrome_fg_color;

  headerbar.titlebar {
    button.toggle { // account-button (> 64.0.3282?)
      border: none;
      min-height: 22px;
      margin: 6px 0;
      padding: 0 10px;
    }

    // from nav_button_provider_gtk3.cc (> 62.0.3202?)
    button.titlebutton { // title-buttons
      // define global titlebutton class sizing
      border: none;
      @extend %windows_button;
    }
  }

  // FIXME: not for actual button widgets but for toolbar's separators
  // crazy: src/+/master/chrome/browser/ui/libgtkui/gtk_ui.cc#891
  button { // for active-tab borders
    border-width: 1px;
    border-style: solid;
    border-color: $chrome_borders_color;
    color: $chrome_fg_color;
    background-color: lighten($chrome_bg_color, 5%);
  }

  entry.chromium {
    color: $chrome_fg_color;
    background-color: darken($chrome_bg_color, 5%);

    & { // overrides standard borders
      color: $chrome_fg_color;
      border-image: none;
      border: 1px solid $chrome_borders_color;
    }

    &:focus { // overrides standard borders
      color: $chrome_fg_color;
      border-image: none;
      border: 1px solid $primary_color;
    }
  }

  // Fixed Atom/VS-code chromium based app menubar issues
  > menubar {
    background-color: $headerbar_bg_color;
    // color: $headerbar_fg_color; // Not use
  }

  > menu {
    border: 1px solid $chrome_borders_color;
    background-color: $chrome_menu_bg_color;
    color: $chrome_menu_fg_color;
    border-radius: 0;

    > menuitem, menuitem {
      color: $chrome_menu_fg_color; // Atom/VS-code menubar use this as menubar menuitem color

      &:hover {
        color: $inversed_fg_color;
        background-color: $primary_color;
      }

      &:disabled {
        color: rgba($chrome_menu_fg_color, 0.45);
      }

      label {
        &:disabled { color: rgba($chrome_menu_fg_color, 0.45); }
      }
    }
  }

  // internal region of toolbar's entry widget
  > textview.view {
    color: $chrome_fg_color;
    background-color: $chrome_bg_color;
  }

  > textview {
    color: $chrome_fg_color;
    background-color: $chrome_bg_color;

    text {
      color: $chrome_fg_color;
      background-color: $chrome_bg_color;

      selection { @extend %html_selection_items; }
    }
  }
}


//
// Synapse
//
window.background > box.vertical > widget > widget:selected { background-color: $primary_color; }

//
// Libre-Office
//
window.background:not(.csd):not(.solid-csd) {
// reserved area at the most-right side of GtkMenuBar
  > grid.horizontal > grid.horizontal {
    background-color: $headerbar_bg_color;

    > button.flat.small-button { // 'close' button
      @extend %header_button;
    }
  }
}

window.background:not(.solid-csd) {
  // for 'Notebookbar' toolbar
  > notebook:not(.frame) {
    border: 0 none transparent; // unset borders
    background-color: $base_color;

    > stack {
      border: none;
      box-shadow: none;
    }
  }
}

//
// rhythmbox
//
// add top-border to inline-toolbar
.sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar {
  box-shadow: inset 0 1px $borders_color;
  padding: 4px;
  background-color: darken($bg_color, 1%);

  button.image-button {
    @extend %flat_button;
  }
}

// tweak sidebar styling
.sidebar-paned {
  scrolledwindow { border: none; }
}

// tweak border and frame in alt-toolbar
window.csd > box.vertical > box.vertical,
window.solid-csd > box.vertical > box.vertical {
  > toolbar.horizontal {
    margin: -1px 0;
    border-top: 1px solid $borders_color;
    box-shadow: none;
//    background-color: transparent;

    button {
      @extend %flat_button;
    }
  }

  > frame {
    margin: -1px 0;
    padding: 0;

    > border { border: none; }
  }
}

// hard-coded spacing depends on non-scalable unit,
// seems cover-art widget is the most biggest thing?
window.background > box.vertical > toolbar.primary-toolbar {
  toolitem {
    .linked > button.image-button.raised { // 'shuffle/repeat'
      @extend %flat_button;
    }

    button.flat.scale { // 'volume'
      @extend %flat_button;
    }

    > box.horizontal:not(.linked) > button.toggle,
    > .linked > button:not(.toggle):not(.raised):not(.flat) {
      @extend %flat_button;
    }
  }
}


//
// Geary
//
.geary-titlebar-left,
.geary-titlebar-right {
  // remove unexpected "hardcoded" vertical separator
  separator { opacity: 0; }
  // background: none;
  box-shadow: $header_shadow, inset 0 1px $secondary_highlight_color;
}

.geary-composer-box {
  .linked > button:not(.combo) { border-radius: $md_radius; }
  .linked > button.combo { border-radius: 0; }

  button:not(.combo) { @extend %flat_button; }

  entry,
  spinbutton:not(.vertical) { @extend %flat_entry; }

  spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
  button.combo { @extend %combo_flat; }
}

// Popover
popover.background {
  list.geary-folder-popover-list {
    row.activatable.geary-folder-popover-list-row {
      color: $fg_color;
      &:disabled { color: $disabled_fg_color; }
    }
  }
}

//
// Tilix
//
overlay > revealer {
  &.left > scrolledwindow.frame,
  &.right > scrolledwindow.frame {
    border-style: none;
    box-shadow: $z-depth-2;
  }

  &.left > scrolledwindow.frame { margin-right: 32px; }
  &.right > scrolledwindow.frame { margin-left: 32px; }
}

.tilix-search-frame {
  button { @extend %flat_button; }
  button.combo { @extend %combo_flat; }

  entry,
  .linked entry,
  .linked entry.search {
    @extend %flat_entry;
    border-radius: 0;
  }

  .linked button { border-radius: $md_radius; }
}

.terminix-session-sidebar, // for backwards compatibility
list.tilix-session-sidebar {
  // use -image property instead
  background-color: $lighter_bg_color;

  row.activatable {
    &, &:selected {
      button.tilix-sidebar-close-button {
        min-height: 20px;
        min-width: 20px;
        padding: 0;
        background-color: $destructive_color;
        @extend %circular_button;

        &, &:hover, &:active, &:checked { color: white; }

        &:hover {
          background-color: lighten($destructive_color, 5%);
          box-shadow: $z-depth-1;
        }

        &:active,
        &:checked {
          background-color: darken($destructive_color, 10%);
          box-shadow: $z-depth-1;
        }
      }
    }
  }
}

button.image-button.session-new-button { min-width: $medium_size - 4px; }

// in-line titlebars
widget > box.terminal-titlebar {
  padding: 0 6px;

  > button.flat.popup.toggle {
    border: none;
    border-radius: 0;
    padding: 0 8px;
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $primary_color 0%,
                                  transparent 0%)
                                  0 0 0 / 0 0 0;

    &:dir(ltr) { padding-right: 6px; }
    &:dir(rtl) { padding-left: 6px; }

    // &:hover { background-color: transparent; }

    &:checked, &:active {
      border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                    $primary_color 100%,
                                    transparent 0%)
                                    0 0 2 / 0 0 2px;
      background-color: transparent;
      color: $fg_color;
    }
  }

  > button.image-button { // 'plus' and 'close'
    &, &.toggle {
      margin: 2px 0;
      padding: 0;
      min-height: 24px;
      min-width: 24px;
      @extend %circular_button;
    }
  }
}


//
// Xfce4
//
$text_shadow: 0 0 1px rgba(0, 0, 0, 0.26),
              0 1px 2px rgba(0, 0, 0, 0.32),
              0 2px 3px rgba(0, 0, 0, 0.12);

%panelbutton {
  color: $topbar_fg_color;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background-color: transparent;

  &:hover:not(:active):not(:checked) {
    color: $topbar_fg_color;
    box-shadow: inset 0 -2px rgba($topbar_theme_color, 0.5);
    background-color: transparent;
  }
  &:checked, &:active {
    color: $topbar_fg_color;
    box-shadow: inset 0 -2px $topbar_theme_color;
    background-color: transparent;
    label, image { color: inherit; }
  }
  &:disabled {
    color: rgba($topbar_fg_color, 0.5);
    box-shadow: none;
    background-color: transparent;
  }
  &:checked:disabled {
    color: rgba($topbar_fg_color, 0.5);
    box-shadow: inset 0 -2px rgba($topbar_theme_color, 0.5);
    background-color: transparent;
  }
}

.XfceHeading {
  border: 0 none transparent;
  background-color: $bg_color;
  color: $fg_color;
}

.xfce4-panel {
  background-color: $topbar_bg_color;
  color: $topbar_fg_color;
  font-weight: 700;
  text-shadow: none;
  -gtk-icon-shadow: none;

  &, // unset borders
  frame > border { border: none; }

  &#XfcePanelWindow { // main panel container >= 4.13.3?
    // FIXME: unneeded 1px borders are reserved by its code itself
    border: 1px solid $topbar_bg_color;

    &, &.marching-ants { transition: none; } // unset transitions
  }

  button.flat { @extend %panelbutton; }

  button {
    font-weight: 700;
    @extend %panelbutton;

    &#launcher-arrow { // launcher applet
      // FIXME: quite weird pseudo-classe transitions, especially :hover
      // state can't be cleared properly ( -> an upstream issue)
      &, + button.toggle {
        &:hover { box-shadow: none; } // hide indicators
      }

      + button.toggle:checked { // 'arrow' toggle button
        color: $topbar_theme_color;
        box-shadow: none;
      }
    }

    &#xfce4-notification-plugin {
      padding: 0 1px; // for 4.12.2
    }
  }

  menu {
    font-weight: 400; // for enforcing regular weight
    text-shadow: none;
    -gtk-icon-effect: none;
  }

  widget.tasklist > button.toggle { font-weight: 400; }
}

XfdesktopIconView.view {
  border-radius: 2px;
  background: transparent;
  color: $inversed_fg_color;
  text-shadow: $text_shadow;

  &:active, &:checked {
    background-color: $topbar_theme_color;
    text-shadow: none;
  }

  .rubberband { @extend rubberband; }
}

window#whiskermenu-window {
  background-color: $base_color;

  // no CSD class even if the sw compositor was enabled.
  > frame > border {
    border-radius: 0;
  }

  entry { @extend %flat_entry; }

  scrolledwindow {
    > viewport button.radio {
      &:hover { background-color: $semi_track_color; }
      &:checked {
        background-color: $primary_color;
        color: $inversed_fg_color;
      }
    }

    treeview.view {
      &:selected:hover {
        background-color: $semi_track_color;
        color: $fg_color;
      }
    }
  }
}

#xfce4-weather-plugin *,
//#pulseaudio-button *,
#xfce4-power-manager-plugin *,
#xfce4-clipman-plugin * {
  -gtk-icon-transform: scale(.8);
}

//
// Thunar
//
window.thunar {

  .sidebar {
    border-top: none;
  }

  toolbar#location-toolbar {
    border-bottom: 1px solid $borders_color;

    // FIXME: need to unset for weird allocation height
    entry { min-height: 0; }
  }

  notebook {
    // hide unneeded border
    stack > scrolledwindow.frame.standard-view {
      border-top-width: 0;
      border-right-width: 0;
    }

    // an allocation height of label node affects to close button's
    // image height (it's quite weird).
    header.top tab.reorderable-page > box > label { min-height: 0; }
  }
}

// vala-panel-appmenu
menubar.-vala-panel-appmenu-private, // xfce4 appmenu plugin
menubar.-vala-panel-background {
  background: none;
  border: none;
  box-shadow: none;

  > menuitem {
    color: $alt_topbar_fg_color;
    font-weight: normal;

    &:hover {
      color: $inversed_fg_color;
      border-radius: 0 0 0 0 ;
    }
  }
}

//
// Nemo
//
.nemo-window {
  .toolbar {
    button {
      @extend %toolbar_flat_button;
      padding: 0 4px;
      margin-top: 2px;
      margin-bottom: 2px;
    }
  }

  .nemo-places-sidebar {
    background-color: $lighter_bg_color;

    &.frame { border-width: 0; }
  }

  notebook {
    background-color: $base_color;

    .primary-toolbar {
      background-color: $bg_color;

      button,
      combobox > .linked > button.combo {
        @include button(normal);
        &:hover { @include button(hover); }
        &:active { @include button(active); }
        &:disabled { @include button(disabled); }
        &:checked { @include button(checked); }
        &:checked:disabled { @include button(checked-disabled); }
      }

      entry {
        @include entry(normal);
        &:focus { @include entry(focus); }
        &:disabled { @include entry(disabled); }
      }
    }
  }

  // Rename entry
  .nemo-window-pane widget.entry {
    border-radius: 3px;
    padding: 3px 10px;
    border: 2px solid $primary_color;
    background-color: rgba($primary_color, 0.1);

    &:selected {
      &:focus, & {
        @extend %selected_items;
      }
    }
  }

  .primary-toolbar {
    padding-top: $container_padding;
    padding-bottom: $container_padding;
    border: none;
    color: $headerbar_fg_color;
    background-color: $headerbar_bg_color;
    box-shadow: $header_shadow;

    button:not(.suggested-action):not(.destructive-action) { @extend %header_button; }

    > toolitem > .linked.raised > button {
      margin-left: 1px;
      margin-right: 1px;
    }

    entry {
      color: $headerbar_fg_color;
      caret-color: $headerbar_fg_color;
      box-shadow: inset 0 -1px rgba($headerbar_fg_color, 0.35);

      &:focus {
        color: $headerbar_fg_color;
      }

      &:disabled {
        color: $disabled_headerbar_fg_color;
      }
    }

    button, entry {
      min-height: 24px;
    }
  }

  // Pathbar
  .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar,
  .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) {
    button { @extend %pathbar_box_button; }
  }

  .sidebar {
    scrolledwindow.frame {
      border: none;  // Removed treeview double borders

      treeview.view.places-treeview:not(:selected) {
        color: $secondary_fg_color;

        // &:hover { color: $secondary_fg_color; }
      }
    }
  }
}

//
// Primary-toolbar (Cinnamon-settings)
//
toolbar.primary-toolbar {
  toolitem.raised {

    button { @extend %toolbar_flat_button; }

    stackswitcher.stack-switcher {
      margin-top: 6px;
      @extend %flat_stackswitcher;
    }
  }
}

//
// Dialogs
//
dialog.background {
  .dialog-vbox {
    grid.horizontal {
      scrolledwindow.frame { //removed ugly boders for nautilus batch renaming dialog
        border: none;
        viewport.frame {
          border: none;
        }
      }

      stack {
        scrolledwindow.frame { // reset border for totem setting dialog
          border: 1px solid $borders_color;
        }
      }
    }

    stackswitcher.stack-switcher {
      margin-top: 6px;
      @extend %flat_stackswitcher; // Cinnamon-settings stackswitcher button
    }

    .dialog-action-area {
      // button { @extend %flat_theme_button; }

      @each $b_type, $b_color in (suggested-action, $suggested_color),
                                 (destructive-action, $destructive_color) {
        button.#{$b_type} {
          color: $b_color;

          &:hover {
            color: $b_color;
            background-color: rgba($b_color, 0.15);
          }

          &:active {
            color: $inversed_fg_color;
            box-shadow: inset 0 0 0 9999px rgba($b_color, 0.5);
            background-image: radial-gradient(circle farthest-corner at center,
                                              rgba($b_color, 0.5) 10%,
                                              transparent 0%);
          }

          &:disabled { opacity: 0.65; }
        }
      }
    }

    stack {
      // button:not(.combo) { @extend %toolbar_flat_button; }

      entry,
      spinbutton:not(.vertical) { @extend %flat_entry; }

      .linked entry { border-radius: 0; }

      spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
      button.combo { @extend %combo_flat; }
    }

    filechooser {
      .search-bar { box-shadow: inset 0 -1px $borders_color; }
    }
  }
}

// dialog.background:not(.csd) {
//   stack {
//     button:not(.combo) { @extend %flat_theme_button; }
//   }
// }

// Nemo settings stack buttons
button#show_previous_icon_toolbar_togglebutton,
button#show_show_thumbnails_icon_toolbar_togglebutton {
  @extend %flat_theme_button;
}

//
// scrolledwindows
//
window.background {
  stack {
    scrolledwindow {
      button.suggested-action,
      button.destructive-action {
        box-shadow: none;
        &:hover, &:active, &:checked { box-shadow: $z-depth-1; }
      }

      button.combo { @extend %combo_flat; }

      :not(stackswitcher).linked button:not(.combo) {
        border-radius: $md_radius;
        margin: 0 2px;
        @extend %toolbar_flat_button;
      }

      stackswitcher.stack-switcher {
        margin-top: 6px;
        @extend %flat_stackswitcher; // Cinnamon-settings stackswitcher button
      }

      .linked button,
      .linked entry { border-radius: 0; }

      entry,
      spinbutton:not(.vertical) { @extend %flat_entry; }
      spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }

      infobar { button { @extend %selected_button; }}
    }
  }
}


//
// Unity
//
// based css:
// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css

// Decorations
UnityDecoration {
  -UnityDecoration-extents: 28px 0 0 0;
  -UnityDecoration-input-extents: 10px;

  -UnityDecoration-shadow-offset-x: 0;
  -UnityDecoration-shadow-offset-y: 3px;
  -UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
  -UnityDecoration-active-shadow-radius: 12px;
  -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
  -UnityDecoration-inactive-shadow-radius: 6px;

  -UnityDecoration-glow-size: 8px;
  -UnityDecoration-glow-color: $primary_color;

  -UnityDecoration-title-indent: 10px;
  -UnityDecoration-title-fade: 35px;
  -UnityDecoration-title-alignment: 0.0;
}

UnityDecoration .top {
  padding: 3px 8px 3px 8px;
  border-radius: 2px 2px 0px 0px;
  box-shadow: inset 0 1px $secondary_highlight_color;
  background-color: $headerbar_bg_color;
  color: $headerbar_fg_color;
}

UnityDecoration .top:backdrop {
  color: gtkalpha($headerbar_fg_color, 0.9);
}

UnityDecoration .left,
UnityDecoration .right,
UnityDecoration .bottom {
  background-color: $headerbar_bg_color;
}

UnityDecoration.menuitem,
UnityDecoration .menuitem {
  color: gtkalpha(currentColor, $enabled_opacity);
}

UnityDecoration.menubar.menuitem:hover,
UnityDecoration.menubar .menuitem *:hover {
  box-shadow: inset 0 -2px $primary_color;
  background-color: transparent;
  color: currentColor;
}

.background:not(.csd) headerbar:not(.titlebar) {
  border-radius: 0;
  box-shadow: none;

  &.inline-toolbar { border-style: none; }
}

SheetStyleDialog.unity-force-quit {
  // background-color: $bg_color;
}

// Panel Style
UnityPanelWidget,
.unity-panel {
  background-color: $topbar_bg_color;
  background-image: image($topbar_bg_color);
  color: $topbar_fg_color;
}

UnityPanelWidget:backdrop,
.unity-panel:backdrop {
  color: $secondary_headerbar_fg_color;
}

.unity-panel.menubar,
.unity-panel .menubar {
}

.unity-panel.menuitem,
.unity-panel .menuitem {
  color: gtkalpha(currentColor, $enabled_opacity);
}

.unity-panel.menubar.menuitem:hover,
.unity-panel.menubar .menuitem *:hover {
  box-shadow: inset 0 -2px $primary_color;
  background-color: transparent;
  color: currentColor;
}

@keyframes playbackmenuitem_spinner {
  to { -gtk-icon-transform: rotate(1turn); }
}

.menu IdoPlaybackMenuItem.menuitem:active {
  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
  animation: playbackmenuitem_spinner 1s infinite linear;
  color: $primary_color;
}

// Unity Calendar //
menuitem calendar,
menuitem calendar .button,
menuitem calendar .header,
menuitem calendar .view {
  background-color: $menu_bg_color;
  color: $menu_fg_color;
  padding: 2px 6px;
}
